import React, { Component } from 'react'
import { Button } from 'antd'
import { Menu, Dropdown } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import 'antd/dist/antd.less'

class Container extends Component {

    state = {
        sum: 0,
        currentChooseNum: 0
    }

    componentDidMount() {
        console.log(this.props)
        // this.props.b()
    }

    // 菜单选中记录当前选中的值
    menuHandlerChoose = ({ key }) => {
        this.setState({
            currentChooseNum: +key
        })
    }

    // 点击+号
    increment = () => {
        const { currentChooseNum } = this.state
        // 1.
        /* store.dispatch({
            type: 'increment',
            data: currentChooseNum
        }) */

        // 2.
        // store.dispatch(createIncrementAction(currentChooseNum))

        this.props.increment(currentChooseNum)

    }

    // 点击-号
    decrement = () => {
        const { currentChooseNum } = this.state
        // 1.
        /* store.dispatch({
            type: 'decrement',
            data: currentChooseNum
        }) */

        // 2. 
        // store.dispatch(createDecrementAction(currentChooseNum))

        this.props.decrement(currentChooseNum)
    }

    // 奇数自增
    incrementIfOdd = () => {
        if (this.props.count % 2 === 1) {
            // 1.
            /* store.dispatch({
                type: 'increment',
                data: 1
            }) */

            // 2. 
            // store.dispatch(createIncrementAction(1))

            this.props.increment(1)
        }
    }

    // 异步自增
    incrementAsync = () => {
        // setTimeout(() => {
        // 1.
        /* store.dispatch({
            type: 'increment',
            data: 1
        }) */
        // }, 1000)

        // 2. 
        // store.dispatch(createIncrementAsyncAction(1, 500))

        this.props.incrementAsync(1, 500)
    }
    render() {
        const menu = (
            <Menu onClick={this.menuHandlerChoose}>
                <Menu.Item key={1}>1</Menu.Item>
                <Menu.Item key={2}>2</Menu.Item>
                <Menu.Item key={3}>3</Menu.Item>
            </Menu>
        )
        return (
            <div className="app">
                <h1>SUM: {this.props.count}</h1>
                <Dropdown overlay={menu}>
                    <a href="javascript;" className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                        请选择... <DownOutlined />
                    </a>
                </Dropdown>
                &nbsp;&nbsp;<Button type="primary" shape="circle" onClick={this.increment}>+</Button>
                &nbsp;&nbsp;<Button shape="circle" onClick={this.decrement}>-</Button>
                &nbsp;&nbsp;<Button type="dashed" shape="round" onClick={this.incrementIfOdd}>为奇数则自增</Button>
                &nbsp;&nbsp;<Button type="dashed" shape="round" onClick={this.incrementAsync}>异步自增</Button>

            </div>
        )
    }
}

export default Container